<template>
  <div>
    <div class="top1">

      </div>
      <div class="top2"></div>
      <div class="top3"></div>
 </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {

  },
  created () {

  },
  mounted () {

  },
  components: {

  },
  computed: {

  },
  watch: {

  },
}
</script>

<style lang='scss' scoped>
.top1{
  background: url('../../public/map.png')no-repeat;
  width: 350px;
  height: 350px;
  background-size: 100%,100%;
  margin-left: 220px;
  margin-top: 360px;
}
.top2{
    background: url('../../public/cn.png')no-repeat;
  width: 380px;
  height: 380px;
  background-size: 100%,100%;
  margin-left: 220px;
  margin-top: -370px;
  animation: cc 2s infinite alternate;
}
.top3{
    background: url('../../public/cnbb.png')no-repeat;
  width: 380px;
  height: 380px;
  background-size: 100%,100%;
  margin-left: 200px;
  margin-top: -370px;
  animation: cc2 2s infinite alternate;
}
  @keyframes cc {

            /* 开始 0%  %可以设置1-100任何值   */
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);

            }
        }
          @keyframes cc2 {

            /* 开始 0%  %可以设置1-100任何值   */
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);

            }
        }
</style>
